import React, { Component } from 'react';
import { Card, Row, Col, Tooltip, Modal, Form, Input, Radio, Space, Button} from 'antd'
import { CheckCircleOutlined, InfoCircleOutlined} from '@ant-design/icons';
import styles from '../style.less'
import { IconFont } from '@utils/request';
import { connect } from 'react-redux';
import * as actions from '../../store/action';
import method_RegExp from '@component/smartlab-login-component/method/resExp';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            MonitorVisible: false,
            type: true,//true完善，false编辑
        }
    }
    PersonalInformation=(value)=>{
        const obj={
            userName:value.userName,
            idNumber:value.idNumber,
            sex:value.sex
        }
        this.props.getPersonalInformation(obj)
        this.setState({ 
            MonitorVisible: false 
        })
    
    }
    render() {
        const { personalCenter } = this.props
        return (
            <Card 
                title={
                    <span>
                        <IconFont type="icon-icon-test" style={{ fontSize: "20px", marginRight: '10px' }} />
                        基本信息
                    </span>
                }
                headStyle={{ fontSize: "13px" }}
                bordered={false}
            >
                <Row gutter={16}>
                    <Col span={10}>
                        <div>账号:<span style={{ fontSize: "10px", marginLeft: "10px" }}>{personalCenter.account}</span></div>
                        <div>地址:<span style={{ fontSize: "10px", marginLeft: "10px", textDecoration: "underline" }}>{personalCenter.address == null ? "暂无数据" : personalCenter.address}</span></div>
                    </Col>
                    <Col span={10}>
                        <div>姓名: <span style={{ fontSize: "10px", marginLeft: "10px", textDecoration: "underline" }}>{personalCenter.userName == null ? "暂无数据" : personalCenter.userName}</span></div>
                        <div>性别:<span style={{ fontSize: "10px", marginLeft: "10px", textDecoration: "underline" }}>{personalCenter.sex == null ? "暂无数据":(personalCenter.sex == true ? "男" : "女")}</span></div>
                    </Col>
                    <Col span={4}>

                        {
                            personalCenter.sex !== null &&
                            personalCenter.userName !== null &&
                            personalCenter.idNumber !== null ? (
                            <span className={styles.one}>
                                <CheckCircleOutlined />
                                <span> 已完善</span>
                            </span>
                        ) : (
                            <span className={styles.four}>
                                <InfoCircleOutlined />
                                <span> 未完善</span>
                            </span>
                        )}
                        <span > | </span>
                        {
                            personalCenter.sex !== null &&
                            personalCenter.userName !== null &&
                            personalCenter.idNumber !== null ? (
                            <Tooltip title="修改个人信息">
                                    <span className={styles.three} onClick={() => this.setState({ MonitorVisible: true, type: false })}>
                                    修改
                                </span>
                            </Tooltip>
                        ) : (
                            <Tooltip title="完善个人信息">
                                    <span className={styles.three} onClick={() => this.setState({ MonitorVisible: true, type: true})}>
                                    设置
                                </span>
                            </Tooltip>
                        )}

                    </Col>
                </Row>
                <Modal
                    title={this.state.type ? '完善个人信息' : '修改个人信息'}
                    destroyOnClose
                    visible={this.state.MonitorVisible}
                    onCancel={() => this.setState({ MonitorVisible: false })}
                    centered
                    footer={null}
                >
                    {
                        this.state.type == true ? (
                            <Form
                                onFinish={this.PersonalInformation}
                            >
                                <Row justify='space-between'>
                                    <Col span={10}>
                                        <Form.Item
                                            label='姓名'
                                            name={['userName']}
                                            rules={[
                                                { required: true, pattern: method_RegExp("chinese"), message: '用户输入中文姓名！' }
                                            ]}
                                        >
                                            <Input placeholder='请填写用户姓名' />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item
                                            label='身份证号'
                                            name={['idNumber']}
                                            rules={[
                                                { required: true, pattern: method_RegExp("idNumber"), message: '请输入正确的身份证号',}
                                            ]}
                                        >
                                            <Input placeholder='请填写身份证号' />
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item
                                            label='性别'
                                            name={['sex']}
                                            rules={[
                                                { required: true, message: '请选则性别' }
                                            ]}
                                        >
                                            <Radio.Group>
                                                <Radio value={true}>男</Radio>
                                                <Radio value={false}>女</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Col>
                                </Row>
                                <Form.Item>
                                    <Space style={{ float: 'right' }}>
                                        <Button type='primary' ghost htmlType='submit'>提交</Button>
                                        <Button type='primary' ghost htmlType='button' onClick={() => this.props.onClose()} danger>取消</Button>
                                    </Space>
                                </Form.Item>
                            </Form>
                        ) : (
                        <Form
                            onFinish={this.PersonalInformation}
                        >
                            <Row justify='space-between'>
                                    <Col span={10}>
                                        <Form.Item
                                            label='姓名'
                                            name={['userName']}
                                            rules={[
                                                { required: true, pattern: method_RegExp("chinese"), message: '用户输入中文姓名！' }
                                            ]}
                                        >
                                            <Input placeholder='请输入用户姓名' />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item
                                            label='身份证号'
                                            name={['idNumber']}
                                            rules={[
                                                { required: true, pattern: method_RegExp("idNumber"), message: '请输入正确的身份证号', }
                                            ]}
                                        >
                                            <Input placeholder='请填写身份证号' />
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item
                                            label='性别'
                                            name={['sex']}
                                            rules={[
                                                { required: true, message: '请选则性别' }
                                            ]}
                                        >
                                            <Radio.Group>
                                                <Radio value={true}>男</Radio>
                                                <Radio value={false}>女</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                    </Col>
                            </Row>
                            <Form.Item>
                                <Space style={{ float: 'right' }}>
                                    <Button type='primary' ghost htmlType='submit'>提交</Button>
                                    <Button type='primary' ghost htmlType='button' onClick={() => this.props.onClose()} danger>取消</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                        )
                    }
                </Modal>
            </Card> 
        );
    }

}

const mapDispatchToProps = (dispatch) => ({
    //完善个信息
    getPersonalInformation(value) {
        dispatch(actions.getPersonalInformation(value))
    },
})
export default connect(null, mapDispatchToProps)(Index);